<template>
    <el-dialog
        append-to-body
        custom-class="user-login-dialog"
        :title="title"
        v-model="show"
        width="414px"
    >
        <UserLogin @success="successEvent" :ref="(r)=>loginRef = r"></UserLogin>
    </el-dialog>
</template>

<script>

// 用户登录框 (包含注册)
import { computed, defineComponent, reactive, ref, nextTick } from "vue"
import { useStore } from "vuex";
import UserLogin from "./UserLogin.vue"
export default defineComponent({
    emits: ["success"],
    components: {
        UserLogin
    },
    setup(props, context) {

        const store = useStore();

        /*
            password-login 密码登录
            vercode-login 验证码登录
            wechat-login 微信登录
            register 注册
        */
    
       const loginRef = ref(null);

        const type = ref("password-login")
        const show = ref(false)
        function openDialog() {

            if (store.state.auth.user != null) {
                return;
            }
            show.value = true;
        }

        const title = computed(()=>{
            if(loginRef.value == null) {
                return "";
            }
            return loginRef.value.title;
        });

    
        function successEvent(){
            context.emit("success")
            show.value = false
        }

        return {
            type,
            show,
            openDialog,
            title,
            loginRef,
            successEvent
        }
    }
});



</script>

<style lang='scss'>

</style>